<template>
    <div class="yybox four-cornor-wrapper" style="background:#fff;">
      <i class="l"></i>
      <i class="r"></i>
      <i class="t"></i>
      <i class="b"></i>
      <!-- main -->
      <h2 class="common-title">
        <span class="main">妇科用药</span>
        <dl class="sub">
          <!-- <dt>查看更多：</dt> -->
          <!-- <dd>排序：</dd>
          <dd @click="orderProduct">销量
            <i class="iconfont icon-up t1" v-if="params.orderId === 11"></i>
            <i class="iconfont icon-jiantoushang-copy t1" v-else></i>
          </dd>
          <dd @click="priceProduct">价格
            <i class="iconfont icon-up t1" v-if="params.orderId === 21"></i>
            <i class="iconfont icon-jiantoushang-copy t1" v-else></i>
          </dd> -->
        </dl>
      </h2>
      <!-- product-list -->
      <div v-if ="products.length > 0">
        <ul class="product-list">
          <li class="product-list-item" v-for="(v, i) in products" :key="i" @click="viewProduct(v)">
            <div class="product-img"><img :src="v.goodsImage" /></div>
            <div class="product-title">{{v.goodsName}}</div>
            <!-- <div class="product-detail">
              <el-tag type="danger">预售</el-tag>
              <span class="t3">产品说明</span>
            </div> -->
            <!-- <div class="white-block">
              ￥{{v.goodsPrice | fixed}}
            </div> -->
          </li>
        </ul>
        <!-- <div class="clearfix mt20" >
          <div class=" fr">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="params.pagenum"
              :page-sizes="[12, 24, 36, 48]"
              :page-size="params.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
        </div> -->
      </div>
      <div class="no-data" v-else>暂无数据</div>
      <!-- end product list -->
      
    </div>
</template>

<script>

export default {
    data () {
    return {
      params: {
        areaId: 403890,
        // gcId: '',
        // gcId1: '',
        keyWord: '',
        orderId: 10,
        pagenum: 1,
        pagesize: 12,
        appCode: 'resident'
      },
      products: [
          {goodsCommonid:41,goodsName:'逍遥丸',goodsImage:require('../../assets/mall/gynaecology1.jpg')},
          {goodsCommonid:42,goodsName:'乌鸡白凤丸',goodsImage:require('../../assets/mall/gynaecology2.jpg')},
          {goodsCommonid:43,goodsName:'硝酸咪康唑阴道软胶囊',goodsImage:require('../../assets/mall/gynaecology3.jpg')},
          {goodsCommonid:44,goodsName:'肤阴洁',goodsImage:require('../../assets/mall/gynaecology4.jpg')},
          {goodsCommonid:45,goodsName:'复方莪术油栓(康妇特)',goodsImage:require('../../assets/mall/gynaecology5.jpg')},
          {goodsCommonid:46,goodsName:'金归洗液',goodsImage:require('../../assets/mall/gynaecology6.jpg')},
      ],
      total: 0
    }
  },
  filters: {
    fixed (val) {
      return val.toFixed(2)
    }
  },
  mounted () {
    // this.getProducts()
  },
  methods: {
    // handleSizeChange (val) {
    //   this.params.pagesize = val
    //   this.getProducts()
    // },
    // handleCurrentChange (val) {
    //   this.params.pagenum = val
    //   this.getProducts()
    // },
    viewProduct (i) {
      this.$router.push('/mall/product?id=' + i.goodsCommonid)
    },
    searchHandle (val) {
      this.params.keyWord = val
      this.getProducts()
    },
    getProducts () {
      this.$store.commit('UPDATE_LOADING')
      commonAjax(['app/shop/goods/list', this.params], `${PLATFORM_PREFIX}.shoppingMallService`, 'doPost').then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 200) {
          let body = JSON.parse(res.data.body)
          if (body.data.total > 0) {
            console.log(body.data.goods)
            this.total = body.data.total
            this.products = body.data.goods
          } else {
            this.products = []
          }
        }
      })
    },
    orderProduct () {
      if (this.params.orderId === 10) {
        this.params.orderId = 11
      } else {
        this.params.orderId = 10
      }
      this.getProducts()
    },
    priceProduct () {
      if (this.params.orderId === 20) {
        this.params.orderId = 21
      } else {
        this.params.orderId = 20
      }
      this.getProducts()
    }
  }

}
</script>
<style lang="less" scoped>
@import '../../common/css/vars.less';
.common-title {
  padding: 20px;
  border-bottom: 2px solid #FCF6F2;
  overflow: hidden;
  .main {
    float: left;
    color: @color-primary;
    font-size: 1.2em;
  }
  .sub {
    float: left;
    margin-left: 80px;
    margin-top: 12px;
    color: #666;
    font-size: 14px;
    .iconfont {font-size: 12px;}
    dt , dd{float: left;margin-left: 20px;cursor: pointer;}
  }
}
.product-list{
  overflow: hidden;
  margin-right: -30px;
  >.product-list-item {
    position: relative;
    float: left;
    width: 244px;
    margin-left: 20px;
    margin-top: 20px;
    border: 1px solid @color-border;
    padding: 10px;
    transition: all .5s;
    cursor: pointer;
    .white-block {
      background: #fff;
      height: 60px;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
    }
    &:hover{
      border-color: #EAD0C3;
      box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    }
    .product-img > img {
      width: 200px;
      height: 200px;
    }
    .product-title {
      height: 40px;
      overflow: hidden;
    }
    // .product-detail {
    //   font-size: 12px;
    //   margin: 2px 0; 
    // }
    .product-money {
      font-size: 1.4em;
      color: @color-price;
    }
  }
}
</style>